:root {
    /******** size *******/
    --size-none: 0;
    --size-1: 4px;
    --size-2: 8px;
    --size-3: 12px;
    --size-4: 16px;
    --size-5: 20px;
    --size-6: 24px;
    --size-7: 28px;
    --size-8: 32px;
    --size-9: 36px;
    --size-10: 40px;
    --size-11: 44px;
    --size-12: 48px;
    --size-13: 52px;
    --size-14: 56px;
    --size-15: 60px;
    --size-16: 64px;
    --size-17: 68px;
    --size-18: 72px;
    --size-19: 76px;
    --size-20: 80px;
    --size-21: 84px;
    --size-22: 88px;
    --size-23: 92px;
    --size-24: 96px;
    --size-25: 100px;
    --size-26: 104px;
    --size-27: 108px;
    --size-28: 112px;
    --size-29: 116px;
    --size-30: 120px;
    --size-31: 124px;
    --size-32: 128px;
    --size-33: 132px;
    --size-34: 136px;
    --size-35: 140px;
    --size-36: 144px;
    --size-37: 148px;
    --size-38: 152px;
    --size-39: 156px;
    --size-40: 160px;
    --size-41: 164px;
    --size-42: 168px;
    --size-43: 172px;
    --size-44: 176px;
    --size-45: 180px;
    --size-46: 184px;
    --size-47: 188px;
    --size-48: 192px;
    --size-49: 196px;
    --size-50: 200px;
    --size-mini: var(--size-6);
    --size-small: var(--size-7);
    --size-medium: var(--size-8);
    --size-large: var(--size-9);
    --size: var(--size-medium);

    /******** spacing *******/
    --spacing-none: 0;
    --spacing-1: 2px;
    --spacing-2: 4px;
    --spacing-3: 6px;
    --spacing-4: 8px;
    --spacing-5: 10px;
    --spacing-6: 12px;
    --spacing-7: 16px;
    --spacing-8: 20px;
    --spacing-9: 24px;
    --spacing-10: 32px;
    --spacing-11: 36px;
    --spacing-12: 40px;
    --spacing-13: 48px;
    --spacing-14: 56px;
    --spacing-15: 60px;
    --spacing-16: 64px;
    --spacing-17: 72px;
    --spacing-18: 80px;
    --spacing-19: 84px;
    --spacing-20: 96px;
    --spacing-21: 100px;
    --spacing-22: 120px;
    --spacing-mini: var(--spacing-4);
    --spacing-small: var(--spacing-6);
    --spacing-medium: var(--spacing-7);
    --spacing-large: var(--spacing-10);
    --spacing: var(--spacing-medium);

    /******** color ********/
    --color-white: #fff;
    --color-black: #000;
    --color-transparent: transparent;

    /******** lineHeight ********/
    --line-height-base: 1.5715;

    /******** shadow distance *******/
    --shadow-distance-none: 0;
    --shadow-distance-1: 1px;
    --shadow-distance-2: 2px;
    --shadow-distance-3: 3px;
    --shadow-distance-4: 4px;

    /******** shadow *******/
    --shadow-none: none;
    --shadow-special: 0 0 1px rgb(0 0 0 / 30%);
    --shadow1-center: 0 0 5px rgb(0 0 0 / 10%);
    --shadow1-up: 0 -2px 5px rgb(0 0 0 / 10%);
    --shadow1-down: 0 2px 5px rgb(0 0 0 / 10%);
    --shadow1-left: -2px 0 5px rgb(0 0 0 / 10%);
    --shadow1-right: 2px 0 5px rgb(0 0 0 / 10%);
    --shadow1-left-up: -2px -2px 5px rgb(0 0 0 / 10%);
    --shadow1-left-down: -2px 2px 5px rgb(0 0 0 / 10%);
    --shadow1-right-up: 2px -2px 5px rgb(0 0 0 / 10%);
    --shadow1-right-down: 2px 2px 5px rgb(0 0 0 / 10%);
    --shadow2-center: 0 0 10px rgb(0 0 0 / 10%);
    --shadow2-up: 0 -4px 10px rgb(0 0 0 / 10%);
    --shadow2-down: 0 4px 10px rgb(0 0 0 / 10%);
    --shadow2-left: -4px 0 10px rgb(0 0 0 / 10%);
    --shadow2-right: 4px 0 10px rgb(0 0 0 / 10%);
    --shadow2-left-up: -4px -4px 10px rgb(0 0 0 / 10%);
    --shadow2-left-down: -4px 4px 10px rgb(0 0 0 / 10%);
    --shadow2-right-up: 4px -4px 10px rgb(0 0 0 / 10%);
    --shadow2-right-down: 4px 4px 10px rgb(0 0 0 / 10%);
    --shadow3-center: 0 0 20px rgb(0 0 0 / 10%);
    --shadow3-up: 0 -8px 20px rgb(0 0 0 / 10%);
    --shadow3-down: 0 8px 20px rgb(0 0 0 / 10%);
    --shadow3-left: -8px 0 20px rgb(0 0 0 / 10%);
    --shadow3-right: 8px 0 20px rgb(0 0 0 / 10%);
    --shadow3-left-up: -8px -8px 20px rgb(0 0 0 / 10%);
    --shadow3-left-down: -8px 8px 20px rgb(0 0 0 / 10%);
    --shadow3-right-up: 8px -8px 20px rgb(0 0 0 / 10%);
    --shadow3-right-down: 8px 8px 20px rgb(0 0 0 / 10%);

    /******** opacity *******/
    --opacity-none: 0;
    --opacity-1: 10%;
    --opacity-2: 20%;
    --opacity-3: 30%;
    --opacity-4: 40%;
    --opacity-5: 50%;
    --opacity-6: 60%;
    --opacity-7: 70%;
    --opacity-8: 80%;
    --opacity-9: 90%;
    --opacity-10: 100%;

    /******** fontSize *******/
    --font-size-caption: 12px;
    --font-size-body-1: 12px;
    --font-size-body-2: 13px;
    --font-size-body-3: 14px;
    --font-size-title-1: 16px;
    --font-size-title-2: 20px;
    --font-size-title-3: 24px;
    --font-size-display-1: 36px;
    --font-size-display-2: 48px;
    --font-size-display-3: 56px;
    --font-size-mini: var(--font-size-body-1);
    --font-size-small: var(--font-size-body-2);
    --font-size-medium: var(--font-size-body-3);
    --font-size-large: var(--font-size-title-1);
    --font-size: var(--font-size-medium);

    /******** fontWeight ********/
    --font-weight-100: 100;
    --font-weight-200: 200;
    --font-weight-300: 300;
    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-600: 600;
    --font-weight-700: 700;
    --font-weight-800: 800;
    --font-weight-900: 900;
    --font-weight: var(--font-weight-500);

    /******** radius *******/
    --radius-none: 0;
    --radius-small: 2px;
    --radius-medium: 4px;
    --radius-large: 8px;
    --radius-circle: 50%;
    --radius: var(--radius-medium);

    /******** borderSize *******/
    --border-none: 0;
    --border-1: 1px;
    --border-2: 2px;
    --border-3: 3px;
    --border-4: 4px;
    --border-5: 5px;
    --border-width: var(--border-1);

    /******** borderStyle *******/
    --border-solid: solid;
    --border-dashed: dashed;
    --border-dotted: dotted;
    --border-style: var(--border-solid);

    /******** borderRadius *******/
    --border-radius-none: var(--radius-none);
    --border-radius-small: var(--radius-small);
    --border-radius-medium: var(--radius-medium);
    --border-radius-large: var(--radius-large);
    --border-radius-circle: var(--radius-circle);
    --border-radius: var(--border-radius-medium);
}


html, body, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input, button{
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-size: 100%;
    border: 0;
}

a{
    text-decoration: none;
    backface-visibility: hidden;
    cursor: pointer;
}

li{
    list-style: none;
}

body{
    font-size: 14px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.5715;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

:hover::-webkit-scrollbar-thumb {
    background: rgb(70 71 79 / 20%);
    border-radius: 10px;
}

input, button, textarea, select{
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    text-decoration:none;
    background: none;
    border: 0 none;
    outline: none;
}

input[type="search"]{
    appearance:none;
}

input[type="search"]::-webkit-search-cancel-button{
    appearance: none;
}

input[type=range]{
    background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#ccc),color-stop(100%,#ccc));
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 2px;
    outline: none;
    appearance: none;

}

input[type=range]::-moz-focus-outer {
    border: 0
}

input[type=range]::-webkit-slider-thumb {
    position: relative;
    width: 28px;
    height: 28px;
    background-color: #fff;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 0 2px rgb(0 0 0 / 30%),0 3px 5px rgb(0 0 0 / 20%);
    cursor: pointer;
    appearance: none
}

input[type=range]::-webkit-slider-thumb::before {
    position: absolute;
    top: 13px;
    left: -2001px;
    width: 2000px;
    height: 2px;
    background: #484746;
    content: " ";
}

input[type=range]::-webkit-slider-thumb::after {
    position: absolute;
    top: -15px;
    left: -15px;
    padding: 30px;
    content: " ";
}

input[type=range]::-ms-fill-lower {
    height: 2px;
    background: #484746;
}

/* 隐藏输入框类型为Number时增减指示器 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    appearance: none;
}

input[type="number"] {
    appearance: textfield;
}

input::input-placeholder, textarea::input-placeholder {
    color: #aab2bd;
}

option{   /* google */  /* firefox */
    appearance: none;
}

table{
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

img[src=""],img:not([src]){
    opacity:0;
}

 /******** size *******/
.f-w100{ width: 100vw; }

.f-h100 { height: 100vh; }

.f-wd4{ width: var(--size-1);}

.f-wd8{ width: var(--size-2);}

.f-wd12{ width: var(--size-3);}

.f-wd16{ width: var(--size-4);}

.f-wd20{ width: var(--size-5);}

.f-wd24{ width: var(--size-6);}

.f-wd28{ width: var(--size-7);}

.f-wd32{ width: var(--size-8);}

.f-wd36{ width: var(--size-9);}

.f-wd40{ width: var(--size-10);}

.f-wd44{ width: var(--size-11);}

.f-wd48{ width: var(--size-12);}

.f-wd52{ width: var(--size-13);}

.f-wd56{ width: var(--size-14);}

.f-wd60{ width: var(--size-15);}

.f-wd64{ width: var(--size-16);}

.f-wd68{ width: var(--size-17);}

.f-wd72{ width: var(--size-18);}

.f-wd76{ width: var(--size-19);}

.f-wd80{ width: var(--size-20);}

.f-wd84{ width: var(--size-21);}

.f-wd88{ width: var(--size-22);}

.f-wd92{ width: var(--size-23);}

.f-wd96{ width: var(--size-24);}

.f-wd100{ width: var(--size-25);}

.f-wd104{ width: var(--size-26);}

.f-wd108{ width: var(--size-27);}

.f-wd112{ width: var(--size-28);}

.f-wd116{ width: var(--size-29);}

.f-wd120{ width: var(--size-30);}

.f-wd124{ width: var(--size-31);}

.f-wd128{ width: var(--size-32);}

.f-wd132{ width: var(--size-33);}

.f-wd136{ width: var(--size-34);}

.f-wd140{ width: var(--size-35);}

.f-wd144{ width: var(--size-36);}

.f-wd148{ width: var(--size-37);}

.f-wd152{ width: var(--size-38);}

.f-wd156{ width: var(--size-39);}

.f-wd160{ width: var(--size-40);}

.f-wd164{ width: var(--size-41);}

.f-wd168{ width: var(--size-42);}

.f-wd172{ width: var(--size-43);}

.f-wd176{ width: var(--size-44);}

.f-wd180{ width: var(--size-45);}

.f-wd184{ width: var(--size-46);}

.f-wd188{ width: var(--size-47);}

.f-wd192{ width: var(--size-48);}

.f-wd196{ width: var(--size-49);}

.f-wd200{ width: var(--size-50);}

/******** spacing *******/
.f-mg0{ margin: var(--spacing-none) auto;}

.f-mg2{ margin: var(--spacing-1);}

.f-mt2{ margin-top: var(--spacing-1);}

.f-mr2{ margin-right: var(--spacing-1);}

.f-mb2{ margin-bottom: var(--spacing-1);}

.f-ml2{ margin-left: var(--spacing-1);}

.f-mg4{ margin: var(--spacing-2);}

.f-mt4{ margin-top: var(--spacing-2);}

.f-mr4{ margin-right: var(--spacing-2);}

.f-mb4{ margin-bottom: var(--spacing-2);}

.f-ml4{ margin-left: var(--spacing-2);}

.f-mg6{ margin: var(--spacing-3);}

.f-mt6{ margin-top: var(--spacing-3);}

.f-mr6{ margin-right: var(--spacing-3);}

.f-mb6{ margin-bottom: var(--spacing-3);}

.f-ml6{ margin-left: var(--spacing-3);}

.f-mg8{ margin: var(--spacing-4);}

.f-mt8{ margin-top: var(--spacing-4);}

.f-mr8{ margin-right: var(--spacing-4);}

.f-mb8{ margin-bottom: var(--spacing-4);}

.f-ml8{ margin-left: var(--spacing-4);}

.f-mg10{ margin: var(--spacing-5);}

.f-mt10{ margin-top: var(--spacing-5);}

.f-mr10{ margin-right: var(--spacing-5);}

.f-mb10{ margin-bottom: var(--spacing-5);}

.f-ml10{ margin-left: var(--spacing-5);}

.f-mg12{ margin: var(--spacing-6);}

.f-mt12{ margin-top: var(--spacing-6);}

.f-mr12{ margin-right: var(--spacing-6);}

.f-mb12{ margin-bottom: var(--spacing-6);}

.f-ml12{ margin-left: var(--spacing-6);}

.f-mg16{ margin: var(--spacing-7);}

.f-mt16{ margin-top: var(--spacing-7);}

.f-mr16{ margin-right: var(--spacing-7);}

.f-mb16{ margin-bottom: var(--spacing-7);}

.f-ml16{ margin-left: var(--spacing-7);}

.f-mg20{ margin: var(--spacing-8);}

.f-mt20{ margin-top: var(--spacing-8);}

.f-mr20{ margin-right: var(--spacing-8);}

.f-mb20{ margin-bottom: var(--spacing-8);}

.f-ml20{ margin-left: var(--spacing-8);}

.f-mg24{ margin: var(--spacing-9);}

.f-mt24{ margin-top: var(--spacing-9);}

.f-mr24{ margin-right: var(--spacing-9);}

.f-mb24{ margin-bottom: var(--spacing-9);}

.f-ml24{ margin-left: var(--spacing-9);}

.f-mg32{ margin: var(--spacing-10);}

.f-mt32{ margin-top: var(--spacing-10);}

.f-mr32{ margin-right: var(--spacing-10);}

.f-mb32{ margin-bottom: var(--spacing-10);}

.f-ml32{ margin-left: var(--spacing-10);}

.f-mg36{ margin: var(--spacing-11);}

.f-mt36{ margin-top: var(--spacing-11);}

.f-mr36{ margin-right: var(--spacing-11);}

.f-mb36{ margin-bottom: var(--spacing-11);}

.f-ml36{ margin-left: var(--spacing-11);}

.f-mg40{ margin: var(--spacing-12);}

.f-mt40{ margin-top: var(--spacing-12);}

.f-mr40{ margin-right: var(--spacing-12);}

.f-mb40{ margin-bottom: var(--spacing-12);}

.f-ml40{ margin-left: var(--spacing-12);}

.f-mg48{ margin: var(--spacing-13);}

.f-mt48{ margin-top: var(--spacing-13);}

.f-mr48{ margin-right: var(--spacing-13);}

.f-mb48{ margin-bottom: var(--spacing-13);}

.f-ml48{ margin-left: var(--spacing-13);}

.f-mg56{ margin: var(--spacing-14);}

.f-mt56{ margin-top: var(--spacing-14);}

.f-mr56{ margin-right: var(--spacing-14);}

.f-mb56{ margin-bottom: var(--spacing-14);}

.f-ml56{ margin-left: var(--spacing-14);}

.f-mg60{ margin: var(--spacing-15);}

.f-mt60{ margin-top: var(--spacing-15);}

.f-mr60{ margin-right: var(--spacing-15);}

.f-mb60{ margin-bottom: var(--spacing-15);}

.f-ml60{ margin-left: var(--spacing-15);}

.f-mg64{ margin: var(--spacing-16);}

.f-mt64{ margin-top: var(--spacing-16);}

.f-mr64{ margin-right: var(--spacing-16);}

.f-mb64{ margin-bottom: var(--spacing-16);}

.f-ml64{ margin-left: var(--spacing-16);}

.f-mg72{ margin: var(--spacing-17);}

.f-mt72{ margin-top: var(--spacing-17);}

.f-mr72{ margin-right: var(--spacing-17);}

.f-mb72{ margin-bottom: var(--spacing-17);}

.f-ml72{ margin-left: var(--spacing-17);}

.f-mg80{ margin: var(--spacing-18);}

.f-mt80{ margin-top: var(--spacing-18);}

.f-mr80{ margin-right: var(--spacing-18);}

.f-mb80{ margin-bottom: var(--spacing-18);}

.f-ml80{ margin-left: var(--spacing-18);}

.f-mg84{ margin: var(--spacing-19);}

.f-mt84{ margin-top: var(--spacing-19);}

.f-mr84{ margin-right: var(--spacing-19);}

.f-mb84{ margin-bottom: var(--spacing-19);}

.f-ml84{ margin-left: var(--spacing-19);}

.f-mg96{ margin: var(--spacing-20);}

.f-mt96{ margin-top: var(--spacing-20);}

.f-mr96{ margin-right: var(--spacing-20);}

.f-mb96{ margin-bottom: var(--spacing-20);}

.f-ml96{ margin-left: var(--spacing-20);}

.f-mg100{ margin: var(--spacing-21);}

.f-mt100{ margin-top: var(--spacing-21);}

.f-mr100{ margin-right: var(--spacing-21);}

.f-mb100{ margin-bottom: var(--spacing-21);}

.f-ml100{ margin-left: var(--spacing-21);}

.f-mg120{ margin: var(--spacing-22);}

.f-mt120{ margin-top: var(--spacing-22);}

.f-mr120{ margin-right: var(--spacing-22);}

.f-mb120{ margin-bottom: var(--spacing-22);}

.f-ml120{ margin-left: var(--spacing-22);}

.f-pd0{ padding: var(--spacing-none);}

.f-pd2{ padding: var(--spacing-1);}

.f-pt2{ padding-top: var(--spacing-1);}

.f-pr2{ padding-right: var(--spacing-1);}

.f-pb2{ padding-bottom: var(--spacing-1);}

.f-pl2{ padding-left: var(--spacing-1);}

.f-pd4{ padding: var(--spacing-2);}

.f-pt4{ padding-top: var(--spacing-2);}

.f-pr4{ padding-right: var(--spacing-2);}

.f-pb4{ padding-bottom: var(--spacing-2);}

.f-pl4{ padding-left: var(--spacing-2);}

.f-pd6{ padding: var(--spacing-3);}

.f-pt6{ padding-top: var(--spacing-3);}

.f-pr6{ padding-right: var(--spacing-3);}

.f-pb6{ padding-bottom: var(--spacing-3);}

.f-pl6{ padding-left: var(--spacing-3);}

.f-pd8{ padding: var(--spacing-4);}

.f-pt8{ padding-top: var(--spacing-4);}

.f-pr8{ padding-right: var(--spacing-4);}

.f-pb8{ padding-bottom: var(--spacing-4);}

.f-pl8{ padding-left: var(--spacing-4);}

.f-pd10{ padding: var(--spacing-5);}

.f-pt10{ padding-top: var(--spacing-5);}

.f-pr10{ padding-right: var(--spacing-5);}

.f-pb10{ padding-bottom: var(--spacing-5);}

.f-pl10{ padding-left: var(--spacing-5);}

.f-pd12{ padding: var(--spacing-6);}

.f-pt12{ padding-top: var(--spacing-6);}

.f-pr12{ padding-right: var(--spacing-6);}

.f-pb12{ padding-bottom: var(--spacing-6);}

.f-pl12{ padding-left: var(--spacing-6);}

.f-pd16{ padding: var(--spacing-7);}

.f-pt16{ padding-top: var(--spacing-7);}

.f-pr16{ padding-right: var(--spacing-7);}

.f-pb16{ padding-bottom: var(--spacing-7);}

.f-pl16{ padding-left: var(--spacing-7);}

.f-pd20{ padding: var(--spacing-8);}

.f-pt20{ padding-top: var(--spacing-8);}

.f-pr20{ padding-right: var(--spacing-8);}

.f-pb20{ padding-bottom: var(--spacing-8);}

.f-pl20{ padding-left: var(--spacing-8);}

.f-pd24{ padding: var(--spacing-9);}

.f-pt24{ padding-top: var(--spacing-9);}

.f-pr24{ padding-right: var(--spacing-9);}

.f-pb24{ padding-bottom: var(--spacing-9);}

.f-pl24{ padding-left: var(--spacing-9);}

.f-pd32{ padding: var(--spacing-10);}

.f-pt32{ padding-top: var(--spacing-10);}

.f-pr32{ padding-right: var(--spacing-10);}

.f-pb32{ padding-bottom: var(--spacing-10);}

.f-pl32{ padding-left: var(--spacing-10);}

.f-pd36{ padding: var(--spacing-11);}

.f-pt36{ padding-top: var(--spacing-11);}

.f-pr36{ padding-right: var(--spacing-11);}

.f-pb36{ padding-bottom: var(--spacing-11);}

.f-pl36{ padding-left: var(--spacing-11);}

.f-pd40{ padding: var(--spacing-12);}

.f-pt40{ padding-top: var(--spacing-12);}

.f-pr40{ padding-right: var(--spacing-12);}

.f-pb40{ padding-bottom: var(--spacing-12);}

.f-pl40{ padding-left: var(--spacing-12);}

.f-pd48{ padding: var(--spacing-13);}

.f-pt48{ padding-top: var(--spacing-13);}

.f-pr48{ padding-right: var(--spacing-13);}

.f-pb48{ padding-bottom: var(--spacing-13);}

.f-pl48{ padding-left: var(--spacing-13);}

.f-pd56{ padding: var(--spacing-14);}

.f-pt56{ padding-top: var(--spacing-14);}

.f-pr56{ padding-right: var(--spacing-14);}

.f-pb56{ padding-bottom: var(--spacing-14);}

.f-pl56{ padding-left: var(--spacing-14);}

.f-pd60{ padding: var(--spacing-15);}

.f-pt60{ padding-top: var(--spacing-15);}

.f-pr60{ padding-right: var(--spacing-15);}

.f-pb60{ padding-bottom: var(--spacing-15);}

.f-pl60{ padding-left: var(--spacing-15);}

.f-pd64{ padding: var(--spacing-16);}

.f-pt64{ padding-top: var(--spacing-16);}

.f-pr64{ padding-right: var(--spacing-16);}

.f-pb64{ padding-bottom: var(--spacing-16);}

.f-pl64{ padding-left: var(--spacing-16);}

.f-pd72{ padding: var(--spacing-17);}

.f-pt72{ padding-top: var(--spacing-17);}

.f-pr72{ padding-right: var(--spacing-17);}

.f-pb72{ padding-bottom: var(--spacing-17);}

.f-pl72{ padding-left: var(--spacing-17);}

.f-pd80{ padding: var(--spacing-18);}

.f-pt80{ padding-top: var(--spacing-18);}

.f-pr80{ padding-right: var(--spacing-18);}

.f-pb80{ padding-bottom: var(--spacing-18);}

.f-pl80{ padding-left: var(--spacing-18);}

.f-pd84{ padding: var(--spacing-19);}

.f-pt84{ padding-top: var(--spacing-19);}

.f-pr84{ padding-right: var(--spacing-19);}

.f-pb84{ padding-bottom: var(--spacing-19);}

.f-pl84{ padding-left: var(--spacing-19);}

.f-pd96{ padding: var(--spacing-20);}

.f-pt96{ padding-top: var(--spacing-20);}

.f-pr96{ padding-right: var(--spacing-20);}

.f-pb96{ padding-bottom: var(--spacing-20);}

.f-pl96{ padding-left: var(--spacing-20);}

.f-pd100{ padding: var(--spacing-21);}

.f-pt100{ padding-top: var(--spacing-21);}

.f-pr100{ padding-right: var(--spacing-21);}

.f-pb100{ padding-bottom: var(--spacing-21);}

.f-pl100{ padding-left: var(--spacing-21);}

.f-pd120{ padding: var(--spacing-22);}

.f-pt120{ padding-top: var(--spacing-22);}

.f-pr120{ padding-right: var(--spacing-22);}

.f-pb120{ padding-bottom: var(--spacing-22);}

.f-pl120{ padding-left: var(--spacing-22);}

/******** bg color ********/
.s-bg-white{ background: var(--color-white);}

/******** color ********/
.s-white{ color: var(--color-white);}

.s-black{ color: var(--color-black);}

.s-transparent{ color: var(--color-transparent);}

.s-primary{ color: var(--color-primary);}

.s-success{ color: var(--color-success);}

.s-warning{ color: var(--color-warning);}

.s-danger{ color: var(--color-danger);}

.s-link{ color: var(--color-link);}

.s-text1{ color: var(--color-text-1);}

.s-text2{ color: var(--color-text-2);}

.s-text3{ color: var(--color-text-3);}

.s-text4{ color: var(--color-text-4);}

/******** lineHeight ********/
.f-lh{ line-height: var(--line-height-base);}

/******** opacity *******/
.f-op0{ opacity: var(--opacity-none);}

.f-op10{ opacity: var(--opacity-1);}

.f-op20{ opacity: var(--opacity-2);}

.f-op30{ opacity: var(--opacity-3);}

.f-op40{ opacity: var(--opacity-4);}

.f-op50{ opacity: var(--opacity-5);}

.f-op60{ opacity: var(--opacity-6);}

.f-op70{ opacity: var(--opacity-7);}

.f-op80{ opacity: var(--opacity-8);}

.f-op90{ opacity: var(--opacity-9);}

.f-op100{ opacity: var(--opacity-10);}

/******** fontSize *******/
.f-fs12{ font-size: var(--font-size-body-1); }

.f-fs13{ font-size: var(--font-size-body-2); }

.f-fs14{ font-size: var(--font-size-body-3); }

.f-fs16{ font-size: var(--font-size-title-1); }

.f-fs20{ font-size: var(--font-size-title-2); }

.f-fs24{ font-size: var(--font-size-title-3); }

.f-fs36{ font-size: var(--font-size-display-1); }

.f-fs48{ font-size: var(--font-size-display-2); }

.f-fs56{ font-size: var(--font-size-display-3); }

/******** textAlign *******/
.f-tal{ text-align: left; }

.f-tac{ text-align: center; }

.f-tar{ text-align: right; }

/******** textDecoration *******/
.f-td1{ text-decoration: underline; }

.f-td2{ text-decoration: line-through;}

/******** fontWeight ********/
.f-fw0{ font-weight: normal; }

.f-fw100{ font-weight: var(--font-weight-100);}

.f-fw200{ font-weight: var(--font-weight-200);}

.f-fw300{ font-weight: var(--font-weight-300);}

.f-fw400{ font-weight: var(--font-weight-400);}

.f-fw500{ font-weight: var(--font-weight-500);}

.f-fw600{ font-weight: var(--font-weight-600);}

.f-fw700{ font-weight: var(--font-weight-700);}

.f-fw800{ font-weight: var(--font-weight-800);}

.f-fw900{ font-weight: var(--font-weight-900);}

/******** radius *******/
.f-br0{ border-radius: var(--radius-none);}

.f-br2{ border-radius: var(--radius-small);}

.f-br4{ border-radius: var(--radius-medium);}

.f-br8{ border-radius: var(--radius-large);}

.f-brc{ border-radius: var(--radius-circle);}

/******** borderSize *******/
.f-bw0{ border-width: var(--border-none);}

.f-bw1{ border-width: var(--border-1);}

.f-bw2{ border-width: var(--border-2);}

.f-bw3{ border-width: var(--border-3);}

.f-bw4{ border-width: var(--border-4);}

.f-bw5{ border-width: var(--border-5);}

 /******** borderStyle *******/
 .f-bs1{ border-style: var(--border-solid);}

 .f-bs2{ border-style: var(--border-dashed);}

 .f-bs3{ border-style: var(--border-dotted);}

 /******** grid *******/
.f-pr{ position: relative; }

.f-pf{ position: fixed; }

.f-dn{ display: none; }

.f-db{ display: block; }

.f-dib{ display: inline-block; }

.f-dg{ display: grid; }

.f-df{ display: flex; }

.f-gp8{ gap: var(--spacing-mini); }

.f-gp12{ gap: var(--spacing-small); }

.f-gp16{ gap: var(--spacing); }

.f-gp32{ gap: var(--spacing-large); }

.f-jcc{ justify-content: center; }

.f-jcsb{ justify-content: space-between; }

.f-jcsa{ justify-content: space-around; }

.f-jcfs{ justify-content: flex-start; }

.f-jcfe{ justify-content: flex-end; }

.f-aic{ align-items: center; }

.f-aifs{ align-items: flex-start; }

.f-aife{ align-items: flex-end; }

.f-f1{ flex: 1; }

.f-fdc{ flex-direction: column; }

.f-fdr{ flex-direction: row; }

.f-fww {flex-wrap: wrap; }

.f-oa{ overflow: auto; }

.f-oh{ overflow: hidden; }

.f-oys{ overflow-y: scroll; }

.f-oxs{ overflow-x: scroll; }

.f-vh{ visibility: hidden; }

.f-vv{ visibility: visible; }

.f-flexc{ display: flex; flex-direction: column; align-items: center; justify-content: center; }

.f-flexr{ display: flex; flex-direction: row; align-items: center; justify-content: center; }

.f-wsn{ white-space: nowrap;}

.f-vam{ vertical-align: middle;}

.f-pe1{ pointer-events: none; }

.f-pe2{ pointer-events: auto; }

.f-curp{ cursor: pointer; }

.f-curd{ cursor: default; }

.f-curna{ cursor: not-allowed; }

.f-trans{ transition: all .3s; }

.f-txtell{
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}

.f-txtell2{
    display:-webkit-box;
    -webkit-box-orient:vertical; box-orient: vertical;
    -webkit-line-clamp:2; line-clamp: 2;
    overflow:hidden;
    text-overflow:ellipsis;
    word-break: break-all;
}

.f-unselect{
    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
    -webkit-touch-callout: none;
    user-select: none;
}

@keyframes fadeIn{
	0%{opacity:0;}

	100%{opacity:1;}
}
@keyframes fadeOut{
	0%{opacity:1;}

	100%{opacity:0;}
}
